<template>
  <div>
    <div class="filter-bar-query">
      <el-row style="height: 40px;" >
        <el-col :span="1" style="text-align: center">
          <el-button size="small" type="primary" @click="createIndex('/alarm/create-index')" class="el-icon-plus"> 新建指标</el-button>
        </el-col>
        <el-col :span="4" :offset="19">
        <el-input class="search-box" placeholder="搜索" icon="search" size="small" v-model="search" @keyup.enter.native = "SearchIndexContent" @click='SearchIndexContent'>
        </el-input>
        </el-col>
      </el-row>
      <el-table :data="indexData" style="margin-top:10px;">
        <el-table-column prop="name" label="指标名称"></el-table-column>
        <el-table-column prop="name" label="指标编码"></el-table-column>
        <el-table-column prop="name" label="单位"></el-table-column>
        <el-table-column prop="name" label="类型"></el-table-column>
        <el-table-column prop="name" label="来源"></el-table-column>
        <el-table-column prop="name" label="指标描述"></el-table-column>
        <el-table-column prop="name" label="接口元数据"></el-table-column>
        <el-table-column prop="name" label="映射表达式"></el-table-column>
        <el-table-column prop="name" label="操作">
          <template scope="scope">
            <el-button type="text" @click="editIndex(scope.row.id)">编辑</el-button>
            <el-button type="text" @click="delIndex(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="indexVisible"
      size="tiny">
      <span>是否要删除当前指标</span>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="indexVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="delConfrim">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { Col, Row, Input, Button, Table, TableColumn, Dialog } from 'element-ui'
  export default {
    methods: {
      editIndex (id) {
        this.$router.push('/alarm/edit-index')
      },
      delConfrim () {
        this.indexVisible = false
        this.indexData.splice(this.index, 1)
      },
      delIndex (index) {
        this.index = index
        this.indexVisible = true
      },
      createIndex (path) {
        this.$router.push(path)
      },
      SearchIndexContent () {}
    },
    data () {
      return {
        indexVisible: false,
        index: '',
        search: '',
        indexData: [
          {}
        ]
      }
    },
    components: {
      'el-col': Col,
      'el-row': Row,
      'el-input': Input,
      'el-button': Button,
      'el-table': Table,
      'el-table-column': TableColumn,
      'el-dialog': Dialog
    }
  }
</script>
<style lang="scss" scoped>
  .filter-bar-query {
    height: 40px;
    padding: 0 10px;
    border-bottom: 1px solid #e5e5e5;
  }
</style>